<template>
  <div class="home">
    <!-- 背景图片 -->
    <!-- <img src="/images/background/R.jpg" class="bgimg" /> -->
    <img :src="bgImages[currentBgIndex]" class="bgimg" />
    <div class="section">
      <div class="navLeft">
        <LeftHome />
      </div>
      <div class="content">
        <div class="common-layout">
          <el-container>
            <el-main>
              <router-view v-slot="{ Component,route }">
                <transition name="fade" mode="out-in">
                  <component :is="Component" :key="route.fullPath"/>
                </transition>
              </router-view>
            </el-main>
          </el-container>
        </div>
      </div>
      <div class="navRight">
        <RightHome />
      </div>
    </div>
  </div>
</template>

<script setup>
import CkEditor from "@ckeditor/ckeditor5-vue";
import ClassicEditor from "@ckeditor/ckeditor5-editor-classic/src/classiceditor"; // 引入编辑器
import ParagraphPlugin from "@ckeditor/ckeditor5-paragraph/src/paragraph"; // 引入段落插件
import EssentialsPlugin from "@ckeditor/ckeditor5-essentials/src/essentials"; // 基本功能插件

import BoldPlugin from "@ckeditor/ckeditor5-basic-styles/src/bold"; // 加粗插件
import ItalicPlugin from "@ckeditor/ckeditor5-basic-styles/src/italic"; // 斜体插件
import StrikethroughPlugin from "@ckeditor/ckeditor5-basic-styles/src/strikethrough"; // 删除线插件
import UnderlinePlugin from "@ckeditor/ckeditor5-basic-styles/src/underline"; // 下划线插件
import SuperscriptPlugin from "@ckeditor/ckeditor5-basic-styles/src/superscript"; // 上标插件
import SubscriptPlugin from "@ckeditor/ckeditor5-basic-styles/src/subscript"; // 下标插件
import CodePlugin from "@ckeditor/ckeditor5-basic-styles/src/code"; // 行内代码插件
import HeadingPlugin from "@ckeditor/ckeditor5-heading/src/heading"; // P H1~H6
import HeadingButtonsUIPlugin from "@ckeditor/ckeditor5-heading/src/headingbuttonsui";
import ParagraphButtonUIPlugin from "@ckeditor/ckeditor5-paragraph/src/paragraphbuttonui";

import "@ckeditor/ckeditor5-basic-styles/build/translations/zh-cn"; // 简体中文
import "ckeditor5/build/translations/zh-cn"; // 中文包

import LinkImagePlugin from "@ckeditor/ckeditor5-link/src/linkimage"; // 图像链接插件

import ImagePlugin from "@ckeditor/ckeditor5-image/src/image"; // 图像插件
import ImageToolbarPlugin from "@ckeditor/ckeditor5-image/src/imagetoolbar"; // 图像工具栏插件
import ImageTextAlterNativePlugin from "@ckeditor/ckeditor5-image/src/imagetextalternative"; // 文本替换图像插件
import ImageCaptionPlugin from "@ckeditor/ckeditor5-image/src/imagecaption"; // 图像标题插件
import ImageInsertPlugin from "@ckeditor/ckeditor5-image/src/imageinsert"; // 插入图像插件
import AutoImagePlugin from "@ckeditor/ckeditor5-image/src/autoimage"; // 自动图像插件
import ImageResizePlugin from "@ckeditor/ckeditor5-image/src/imageresize"; // 调整图像尺寸插件
import "@ckeditor/ckeditor5-image/build/translations/zh-cn"; // 图像插件中文简体语言包

import IndentPlugin from "@ckeditor/ckeditor5-indent/src/indent"; // 缩进插件（列表）
import IndentBlockPlugin from "@ckeditor/ckeditor5-indent/src/indentblock"; // 缩进插件（块：段落，标题）
import "@ckeditor/ckeditor5-indent/build/translations/zh-cn"; // 块缩进中文包

import CodeBlockPlugin from "@ckeditor/ckeditor5-code-block/src/codeblock"; // 代码块插件
import "@ckeditor/ckeditor5-code-block/build/translations/zh-cn"; // 代码块插件中文简体他语言包

import FindAndReplace from "@ckeditor/ckeditor5-find-and-replace/src/findandreplace"; // 查找替换插件
import "@ckeditor/ckeditor5-find-and-replace/build/translations/zh-cn"; // 查找替换插件中文简体语言包

import Font from "@ckeditor/ckeditor5-font/src/font";
import SimpleUploadAdapter from "@ckeditor/ckeditor5-upload/src/adapters/simpleuploadadapter";
import LeftHome from "./home/LeftHome.vue";
import RightHome from "./home/RightHome.vue";
import homePage from "./page/homePage.vue";
import { useHomeStore } from "@/stores/home.js";
import { onMounted, onUpdated, ref,onUnmounted } from "vue";
import axios from "axios";
import URL from "@/api/url";
import fn from '@/tools/timer.js'
const store = useHomeStore();
// 图片路径数组（根据实际图片修改）
const bgImages = [
  '/images/background/R.jpg',
  '/images/background/riluo.jpg',
  '/images/background/static2.webp',
  '/images/background/static5.webp',
  // 添加更多图片路径...
]
const currentBgIndex = ref(0)
const handleKeyDown = (event) => {
  switch(event.key) {
    case 'ArrowLeft':
      currentBgIndex.value = (currentBgIndex.value - 1 + bgImages.length) % bgImages.length
      break
    case 'ArrowRight':
      currentBgIndex.value = (currentBgIndex.value + 1) % bgImages.length
      break
  }
}
function check() {
  axios.get(URL() + "/article/checkArticle").then((item) => {
    if (item.data.code === 20000) {
      // console.log(item);
      item.data.data.forEach((element) => {
        element.createdAt = fn(element.createdAt);
      });
      store.article = item.data.data.sort((a, b) => {
        return new Date(b.createdAt) - new Date(a.createdAt);
      });
      // console.log(store.article);
    }
  });
}
function photo() {
  axios.get(URL() + "/photo/findPhoto").then((item) => {
    if (item.data.code === 20000) {
      store.imgUrl = item.data.data;
    }
  });
}
onMounted(() => {
  check();
  if(store.imgUrl.length === 0){
    photo()
  }
  window.addEventListener('keydown', handleKeyDown)
});
onUnmounted(() => {
  window.removeEventListener('keydown', handleKeyDown)
})
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  .bgimg {
    position: absolute;
    top: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: -1;
    transition: opacity 0.5s ease-in-out;
  }
  /* 如果要实现切换时的淡入淡出效果 */
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
  .section {
    width: 80%;
    height: 100%;
    color: var(--el-text-color-primary);
    display: flex;
    margin: 0 auto;
    .navRight,
    .content,
    .navLeft {
      background-color: var(--el-fill-color-blank);
      box-shadow: 
      0 4px 8px rgba(255, 255, 255, 0.1),
      0 8px 24px rgba(255, 255, 255, 0.1);
      height: 100%;
      border-radius: 5px;
    }
    .navRight {
      flex: 1;
    }
    .content {
      flex: 3;
      margin: 0 3px;
      .el-main {
        padding: 10px;
      }
    }
    .navLeft {
      flex: 1;
    }
  }
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>